{% extends 'base.html' %}
{% block title %}我的网站{% endblock %}
{% block nav_blog_active %}active{% endblock %}
{% block header_extends %}
    <link rel="stylesheet" href="/static/blog.css/">
{% endblock %}


{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-sm-8 ">
                <div class="panel panel-default">
                <div class="panel-heading">{% block blog_list_title %}博客列表{% endblock %}</div>
                <div class="panel-body">
                     {% for blog in blogs %}
                         <div class="blog">
                            <a href="{% url 'blog_detail' blog.pk %}"><h3>{{ blog.title }}</h3></a>
                             <p class="blog-info">
                                 <span class="glyphicon glyphicon-tags" aria-hidden="true"></span>
                                 <a href="{% url 'blog_with_type' blog.blog_type.pk %}">{{ blog.blog_type }}</a>
                                 <span class="glyphicon glyphicon-time" aria-hidden="true"></span>
                                 {{ blog.created_time| date:"Y-m-d" }}
                                 阅读({{ blog.get_viewed_num }}) 评论({{ blog.get_comments_num }})

                             </p>

                            <p>{{ blog.content |striptags| truncatechars:120 }}</p>
                         </div>

                        {% empty %}
                         <div class="blog">
                            <h3> --暂无博客-- </h3>
                         </div>
                     {% endfor %}
                </div>
                </div>
            {# 分页功能 #}
                <div class="pageinator">
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                            {% if page_of_blogs.has_previous %}
                                <li> <a href="?page={{ page_of_blogs.previous_page_number }}" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span></a></li>
                            {% else %}
                                <li><span aria-hidden="true">&laquo;</span></li>
                            {% endif %}

                            {% for page_num in page_range %}
                                {# 判断当前页码 #}
                                {% if page_num == page_of_blogs.number %}
                                    <li class="active"><span>{{ page_num }}</span></li>
                                {% else %}
                                    {% if page_num == '...' %}
                                       <li><span>{{ page_num }}</span></li> {% else %}
                                        <li><a href="?page={{ page_num }}">{{ page_num }}</a></li>
                                    {% endif %}
                                {% endif %}
                             {% endfor %}

                             {% if page_of_blogs.has_next %}
                                 <li> <a href="?page={{ page_of_blogs.next_page_number }}"
                                         aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
                            {% else %}
                                <li><span aria-hidden="true">&raquo;</span></li>
                            {% endif %}

                         </ul>
                    </nav>
                <p>共有{{ page_of_blogs.paginator.count }}篇博客,当前第{{ page_of_blogs.number }}页,共{{ page_of_blogs.paginator.num_pages }}页</p>
                </div>
            </div>

            <div class="col-sm-4 ">
                <div class="panel panel-default">
                    <div class="panel-heading">博客分类</div>
                    <div class="panel-body">
                        <ul class="blog-types">
                            {% for blog_type in blog_types %}
                                <li><a href="{% url 'blog_with_type' blog_type.pk %}">{{ blog_type.type_name }} ({{ blog_type.blog_count }})</a></li>
                            {% empty %}
                            <li>暂无分类</li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
                    <div class="panel panel-default">
                        <div class="panel-heading">日期分类</div>
                        <div class="panel-body">
                            <ul class="blog-dates">
                                {% for blog_date,blog_count in blog_dates.items %}
                                    <li>
                                        <a href="{% url 'blogs_with_date' blog_date.year blog_date.month %}">
                                            {{ blog_date| date:"Y年m月" }}({{ blog_count }})
                                        </a>
                                    </li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>

            </div>
        </div>
    </div>
{% endblock %}




